<template>
  <div class="test-nav">
    <h1>导航测试页面</h1>
    
    <div class="test-section">
      <h2>直接访问测试</h2>
      <button @click="goToMemberCenter">直接跳转到会员中心</button>
      <button @click="goToProfile">跳转到个人中心</button>
      <button @click="checkAuth">检查认证状态</button>
    </div>
    
    <div class="test-section">
      <h2>认证测试</h2>
      <p v-if="currentUser">当前登录用户: {{ currentUser.username }}</p>
      <p v-else>未登录</p>
      <button @click="tryLogin">模拟登录</button>
      <button @click="tryLogout">退出登录</button>
    </div>
    
    <div class="test-section">
      <h2>日志信息</h2>
      <div class="logs" v-if="logs.length > 0">
        <p v-for="(log, index) in logs" :key="index" :class="log.type">
          {{ log.message }}
        </p>
      </div>
      <p v-else>暂无日志</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentUser, login, logout } from '@/utils/auth'

const router = useRouter()
const currentUser = ref(null)
const logs = ref([])

// 添加日志
function addLog(message, type = 'info') {
  logs.value.unshift({ message, type })
  if (logs.value.length > 20) {
    logs.value.pop()
  }
  console.log(message)
}

// 更新用户信息
function updateUser() {
  currentUser.value = getCurrentUser()
  addLog(`用户状态: ${currentUser.value ? '已登录' : '未登录'}`)
}

// 跳转到会员中心
function goToMemberCenter() {
  addLog('尝试跳转到 /member')
  router.push('/member').then(() => {
    addLog('导航成功')
  }).catch(err => {
    addLog(`导航失败: ${err.message}`, 'error')
  })
}

// 跳转到个人中心
function goToProfile() {
  addLog('尝试跳转到 /profile')
  router.push('/profile').then(() => {
    addLog('导航成功')
  }).catch(err => {
    addLog(`导航失败: ${err.message}`, 'error')
  })
}

// 检查认证状态
function checkAuth() {
  updateUser()
  addLog(`会员状态: ${currentUser.value?.isMember ? '是' : '否'}`)
  addLog(`会员等级: ${currentUser.value?.memberLevel || '无'}`)
}

// 模拟登录
function tryLogin() {
  try {
    addLog('尝试登录...')
    // 尝试使用测试账号登录
    const result = login('testuser', '123456')
    addLog(`登录成功: ${result.username}`)
    updateUser()
  } catch (error) {
    addLog(`登录失败: ${error.message}`, 'error')
    // 如果没有测试账号，尝试注册
    try {
      addLog('尝试注册测试账号...')
      login('testuser', '123456')
      addLog('注册并登录成功')
      updateUser()
    } catch (regError) {
      addLog(`注册失败: ${regError.message}`, 'error')
    }
  }
}

// 退出登录
function tryLogout() {
  addLog('退出登录...')
  logout()
  updateUser()
}

// 初始化
onMounted(() => {
  addLog('测试页面加载完成')
  updateUser()
  
  // 监听认证状态变化
  window.addEventListener('auth-changed', updateUser)
})
</script>

<style scoped>
.test-nav {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: var(--accent);
}

button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background: var(--accent-hover);
}

.logs {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  background: #f5f5f5;
  border-radius: var(--radius);
}

.logs p {
  margin: 5px 0;
  font-family: monospace;
  font-size: 14px;
}

.logs p.error {
  color: var(--danger);
}

.logs p.info {
  color: #333;
}
</style>